<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>星座配对</title>
		<meta name="description" content="">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.anim-box {
				position: relative;
				width: 80%;
				height: 500px;
				margin: 50px auto;
				background-color: #000;
				color: #000;
			}

			.anim-box>* {
				position: absolute;
			}

			.anim-box span {
				width: 80px;
				height: 80px;
				line-height: 80px;
				text-align: center;
				border-radius: 100%;
				background-color: #fff;
				color: #000;
				z-index: 999;
			}

			.anim-box span {
				-webkit-transition: .8s;
				transition: .8s;
			}

			.anim-box ul {
				bottom: 50px;
				left: 20px;
				font-size: 0;
			}

			.anim-box ul li {
				display: inline-block;
				width: 80px;
				height: 80px;
				line-height: 80px;
				margin: 20px 20px 0 0;
				text-align: center;
				border-radius: 100%;
				background-color: #c00;
				color: #fff;
				font-size: 14px;
			}

			@-webkit-keyframes beam {
				0% {
					box-shadow: 0 0 0px rgba(255, 255, 255, 0);
					opacity: 0.3;
				}

				50% {
					box-shadow: 0 0 100px rgba(255, 255, 255, 1);
					opacity: 1;
				}

				100% {
					box-shadow: 0 0 0px rgba(255, 255, 255, 0);
					opacity: 0.3;
					background-color: #fff;
				}
			}

			@keyframes beam {
				0% {
					box-shadow: 0 0 0px rgba(255, 255, 255, 0);
					opacity: 0.3;
				}

				50% {
					box-shadow: 0 0 100px rgba(255, 255, 255, 1);
					opacity: 1;
				}

				100% {
					box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0);
					opacity: 0.3;
					background-color: #fff;
				}
			}

			.beam {
				animation: beam 1s infinite;
				-webkit-animation: beam 1s infinite;
			}
		</style>
	</head>
	<body>

		<section class="anim-box">
			<span id="me">你</span>
			<ul class="xingzuo">
				<li>天秤座</li>
				<li>处女座</li>
				<li>水瓶座</li>
				<li>双子座</li>
				<li>双鱼座</li>
				<li>白羊座</li>
			</ul>
		</section>


		<script>
			;
			! function() {


				var find = function(index) {
					var me = document.getElementById('me');
					var ul = document.querySelectorAll('.xingzuo')[0];
					var xzs = ul.querySelectorAll('li');

					var x = xzs[index].offsetLeft + ul.offsetLeft;
					var y = xzs[index].offsetTop + ul.offsetTop;

					me.style['-webkit-transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(0.5)';
					me.style['transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(0.5)';
					me.style.opacity = 0.5;

					setTimeout(function() {
						xzs[index].className = 'beam';
						setTimeout(function() {
							me.removeAttribute('style');
						}, 500);
					}, 800);
				};



				setTimeout(function() {
					find(Math.random() * 5 | 0) //模拟匹配
				}, 1000);


			}();
		</script>
	</body>
</html>
